<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>千郡医疗</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" th:href="@{/weixin/css/style.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/dropload.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
	<script type="text/javascript"  th:src="@{/weixin/js/adaptive.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/fastclick.min.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/dropload.min.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/weui.min.js}"></script>
	<script type="text/javascript" th:src="@{/assets/js/plugins/moment/moment.js}"></script>
	<style>
	.noneBorder{
		border: none;
	}
	body{font-size: initial !important;}
	</style>
</head>
<body>
	<div class="kVal">
		<div class="top tc">
			<p>本店今日K值</p>
			<p class="money" th:text="${todayKValue}"></p>
			<div class="box-h t-b">
				<div class="flex">
					<p class="price" th:text="${allKValue}"></p>
					<p>本店累计K值</p>
				</div>
				<div class="flex">
					<p class="price" th:text="${balanceKValue}"></p>
					<p>已结算</p>
				</div>
				<div class="flex">
					<p class="price" th:text="${unBalanceKValue}"></p>
					<p>待结算</p>
				</div>
			</div>
		</div>
		<section class="recordBox wrapper">
		<div class="contain">
					<div class="box-h recordDate">
						<ul class="dataList flex">
							<li class="box-h">
								<span class="name">开始时间</span>
								<p id="beginDate" class="date flex" th:text="${beginDate}"></p>
							</li>
							<li class="box-h">
								<span class="name">结束时间</span>
								<p id="endDate" class="date flex" th:text="${endDate}"></p>
							</li>
						</ul>
						<a href="javascript:toHref();" class="btn">确定</a>
					</div>
					<div class="ktab customerList">
					<table>
					<thead>
						<tr>
							<td>客户名称</td>
							<td>累计消费总额</td>
							<td>已结算</td>
							<td>待结算</td>
							<td>时间</td>
						</tr>
					</thead>
					<tbody id="content">
					</tbody>
				</table>
				</div>
				</div>
		</section>
	</div>

	<script  th:inline="JavaScript">
	var query = {'recommDistributorId':[[${recommDistributorId}]],'distributorId':[[${distributorId}]],'beginDate':[[${beginDate}]],'endDate':[[${endDate}]]};
	</script>
	
	<script type="text/javascript">
	/*<![CDATA[*/
	           
    function toHref(){
    	
		var listUrl = "/qianjun/weixin/customer/toKValue?";	
			
    	var beginDate = $("#beginDate").text();
    	var endDate = $("#endDate").text();
    	
    	if(beginDate){
    		listUrl += "&beginDate=" + beginDate;
    	}
    	
    	if(endDate){
    		listUrl += "&endDate=" + endDate;
    	}	
    	
    	window.location.href = listUrl;
    }	           

	$(function(){	  	           
		$("#beginDate").click(function(){
			weui.datePicker({
				start: '2017-07-01',
				end: moment().add(30,"days").format("YYYY-MM-DD"),
		        onConfirm: function onConfirm(result) {
		        	
		        	var d = result[0].value + "-" + (result[1].value < 10 ? ("0" + result[1].value) : result[1].value) + "-" + (result[2].value < 10 ? ("0" + result[2].value) : result[2].value);
		        	
		        	//$("#date").val(moment(d).format("YYYY-MM-DD"));
		        	$("#beginDate").text(d);
		        	query["beginDate"] = d;
		        },
		        id: 'datePicker'
		    });
		});
		
		$("#endDate").click(function(){
			weui.datePicker({
		        start: '2017-07-01',
		        end: moment().add(30,"days").format("YYYY-MM-DD"),
		        onConfirm: function onConfirm(result) {
		        	var d = result[0].value + "-" + (result[1].value < 10 ? ("0" + result[1].value) : result[1].value) + "-" + (result[2].value < 10 ? ("0" + result[2].value) : result[2].value);
		        	//$("#date").val(moment(d).format("YYYY-MM-DD"));
		        	$("#endDate").text(d);
		        	query["endDate"] = d;
		        },
		        id: 'datePicker'
		    });
		});	           
         
		var page = 0;
		 $('.wrapper').dropload({
			    //scrollArea : window,
			    autoLoad : true,//自动加载
			    loadDownFn : function(me){
			      window.history.pushState(null, document.title, window.location.href); 
			      var queryUrl = '';
			      
			        $.ajax({
			            type: 'GET',
			            url: "/qianjun/weixin/order/list?page=" + page,
			            dataType: 'json',
			            data: query,
			            success: function(data){
			                if(data.content.length == 0){
			                    me.lock();
			                    me.noData();
			                    me.resetload();
			                    return;
			                }

					        var result = '';
			                for(var i=0; i< data.content.length; i++){
			                  result+=content(data.content[i]);
			                }
			                $('#content').append(result);
			                page++;
			                me.resetload();
			            },
			            error: function(xhr, type){
			                me.resetload();
			            }
			        });
			    }
			});
		 
		 function content(data){
				var html = '<tr onclick="toPayment(' + data.id + ')"><td>' + data.customerName + '</td><td>' + data.amount + '</td><td>' + data.balanceAmount + '</td><td>' + data.unBalanceAmount + '</td><td>' + data.createTime + '</td></tr><tr class="des" onclick="toPayment(' + data.id + ')"><td colspan="5">美容项目</td></tr>';
				return html;
			}
		 
		 function toPayment(orderId){
			 window.location.href = "/qianjun/weixin/order/paymentList?orderId=" + orderId;
		 }
		});
	 /*]]>*/
	</script>
	
</body>
</html>